<!DOCTYPE html>
<html>

<head>
    <!--设置链接的样式
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻-->
    <meta charset="utf-8" />
    <style>
        #customers {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            width: 100%;
            border-collapse: collapse;
        }
        
        #customers td,
        #customers th {
            font-size: 1em;
            border: 1px solid #98bf21;
            padding: 3px 7px 2px 7px;
        }
        
        #customers th {
            font-size: 1.1em;
            text-align: left;
            padding-top: 5px;
            padding-bottom: 4px;
            background-color: #A7C942;
            color: #ffffff;
        }
        
        #customers tr.alt td {
            color: #000000;
            background-color: #EAF2D3;
        }
        
        a.six:link,
        a:visited {
            display: block;
            font-weight: bold;
            font-size: 14px;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            color: #FFFFFF;
            background-color: #98bf21;
            width: 120px;
            text-align: center;
            padding: 4px;
            text-decoration: none;
        }
        
        a.six:hover,
        a:active {
            background-color: #7A991A;
        }
    </style>
    <style>
        a.one:link {
            color: #ff0000;
        }
        
        a.one:visited {
            color: #0000ff;
        }
        
        a.one:hover {
            color: #ffcc00;
        }
        
        a.two:link {
            color: #ff0000;
        }
        
        a.two:visited {
            color: #0000ff;
        }
        
        a.two:hover {
            font-size: 150%;
        }
        
        a.three:link {
            color: #ff0000;
        }
        
        a.three:visited {
            color: #0000ff;
        }
        
        a.three:hover {
            background: #66ff66;
        }
        
        a.four:link {
            color: #ff0000;
        }
        
        a.four:visited {
            color: #0000ff;
        }
        
        a.four:hover {
            font-family: '微软雅黑';
        }
        
        a.five:link {
            color: #ff0000;
            text-decoration: none;
        }
        
        a.five:visited {
            color: #0000ff;
            text-decoration: none;
        }
        
        a.five:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p>
    <p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体尺寸</a></b></p>
    <p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景色</a></b></p>
    <p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体</a></b></p>
    <p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本的装饰</a></b></p>
    <a class="six" href="/index.html" target="_blank">W3School</a>

    <table id="customers">
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>

        <tr>
            <td>Apple</td>
            <td>Steven Jobs</td>
            <td>USA</td>
        </tr>

        <tr class="alt">
            <td>Baidu</td>
            <td>Li YanHong</td>
            <td>China</td>
        </tr>

        <tr>
            <td>Google</td>
            <td>Larry Page</td>
            <td>USA</td>
        </tr>

        <tr class="alt">
            <td>Lenovo</td>
            <td>Liu Chuanzhi</td>
            <td>China</td>
        </tr>

        <tr>
            <td>Microsoft</td>
            <td>Bill Gates</td>
            <td>USA</td>
        </tr>

        <tr class="alt">
            <td>Nokia</td>
            <td>Stephen Elop</td>
            <td>Finland</td>
        </tr>


    </table>
</body>

</html>